<template>
  <div class="comment">
    <div class="article">

      <el-table
        :data="passOrRef"
        style="width: 100%"
      >
        <el-table-column label="编号">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="评论内容">
          <template slot-scope="scope">
            {{ scope.row.content }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="content" label="评论内容" width="180" align="center" /> -->
        <el-table-column label="评论时间">
          <template slot-scope="scope">
            {{ scope.row.commentTime }}
          </template>
        </el-table-column>
        <el-table-column label="产品id">
          <template slot-scope="scope">
            {{ scope.row.orderId }}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="delateById(scope.row)">删除</el-button>
            <el-button type="text" @click="commentExamine(scope.row)">{{ scope.row.ExamineMessage }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block" :total="total">
      <el-pagination
        :current-page.sync="currentPage1"
        :page-size="6"
        layout="total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import qs from 'querystring'
export default {
  data() {
    return {
      ExamineMessage: '拒绝审核',
      input: '',
      tableData: [],
      total: 0,
      currentPage1: 1,
      pageSize: 6
    }
  },
  computed: {
    passOrRef: function() {
      this.tableData.forEach(item => {
        if (item.status == '审核通过' || item.status == '未审核') {//eslint-disable-line
          item.ExamineMessage = '拒绝审核'
        } else if (item.status == '审核不通过') {//eslint-disable-line
          item.ExamineMessage = '通过审核'
        }
      })
      return this.tableData
    }
  },
  created() {
    this.findAll()
  },
  methods: {
    // 审核
    commentExamine(row) {
      var self = this
      var params = {
        commentid: row.id
      }
      if (row.ExamineMessage == '拒绝审核') {//eslint-disable-line
        this.$axios.get('/comment/commentRefuseExamine', { params }).then(res => {
          self.findAll()
        })
      } else {
        this.$axios.get('/comment/commentExamine', { params }).then(res => {
          self.findAll()
        })
      }
    },
    // 根据id单个删除
    delateById(row) {
      var id = row.id
      var self = this
      this.$axios.get('/comment/deleteById', { params: { id: id }}).then((res) => {
        if (res.data.status == 200) {//eslint-disable-line
          self.findAll()
        } else {
          alert(res.data.message)
        }
      })
    },
    // 分页查询封装函数
    findAll() {
      var data = {
        page: this.currentPage1 - 1,
        pageSize: this.pageSize
      }
      this.$axios.post('/comment/query', qs.stringify(data)).then((res) => {
        this.tableData = res.data.data.list
        this.total = res.data.data.total
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.findAll()
    }
  }
}
</script>
<style lang="scss" scoped>
    .comment{
        padding: 20px;
    }
    .comment>div{
      margin-bottom: 10px;
    }

</style>

